<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 
    computed和watch的区别：
      1.computed 能完成的工作，watch都可以完成
      2.watch 能完成的工作，computed不一定能完成，比如：watch可以异步操作

    两个重要的小原则：
      1.所有被 vue 所管理的函数，最好写成普通函数，这样 this 的指向才是 vue 或 组件实例对象
      2.所有不被 vue 所管理的函数（定时器的回调函数、ajax的回调函数、Promise的回调函数），最好写成箭头函数，
        这样 this 的指向才是 vm 或 组件实例对象
    -->
    <div id="root">
      <span>让更改延时1秒再有效果</span><br>
      姓：<input type="text" v-model:value="lastName" /><br />
      名：<input type="text" v-model="firstName" /><br />
      姓名：<span>{{fullName}}</span>
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false;
      const vm = new Vue({
        data: {
          // vm和vm._data里都有
          lastName: "张",
          firstName: "三",
          fullName: "张三", // 用监视属性改页面，属性必须提前准备好，computed可以没有
        },
        watch: {
          firstName: {
            handler(newValue) {
              setTimeout(() => {
                this.fullName = this.lastName + newValue;
              }, 1000);
            },
          },
          lastName: {
            handler(newValue) {
              setTimeout(() => {
                this.fullName = newValue + this.firstName;
              }, 1000);
            },
          },
        },
      });
      vm.$mount("#root");
    </script>
  </body>
</html>
